<template>
  <div class="contents">
    <div class="top">
      <img class="logo" src="~@/assets/images/logo.png" />
      <div class="icons">
        <img class="sys" src="~@/assets/images/sys.png" />
        <img class="tz" src="~@/assets/images/tz.png" />
      </div>
    </div>
    <div class="swiper">
      <van-swipe class="my-swipe" :stop-propagation="false" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, i) in advertList" :key="i">
          <img
            v-if="baseData&&baseData.data"
            @click="jumpto(item)"
            style="width: 100%;"
            :src="baseData.data.imgUrl + item.imageUrl"
            alt
          />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="center">
      <div class="model">
        <div class="c line">
          <img src="~@/assets/images/c1.png" />
          <span>我要买币</span>
        </div>
        <div class="c line">
          <img src="~@/assets/images/c2.png" />
          <span>我要卖币</span>
        </div>
        <div class="c line" @click="$toast('暂未开放，敬请期待！')">
          <img src="~@/assets/images/c3.png" />
          <span>商家认证</span>
        </div>
        <a class="c" target="_blank" :href="online">
          <img src="~@/assets/images/c4.png" />
          <span>联系客服</span>
        </a>
      </div>

      <div class="model2">
        <div class="gray">
          <div class="x line">
            <img src="~@/assets/images/c6.png" />
            <span>一键买币<br />快速匹配</span>
          </div>
          <div class="x">
            <img src="~@/assets/images/c5.png" />
            <span>USDT<br />购买98币</span>
          </div>
        </div>
        <div class="lineModel">
          <div class="mo">
            <span class="s1">24H交易量</span>
            <span class="s2">{{transData['ONE_DAY_TRANS_NUMBER'] || '--'}}</span>
            <img src="~@/assets/images/1.png" />
          </div>
          <div class="mo">
            <span class="s1">24H成交单</span>
            <span class="s2 red">{{transData['ONE_DAY_TRANS_ORDER'] || '--'}}</span>
            <img src="~@/assets/images/2.png" />
          </div>
          <div class="mo">
            <span class="s1">交易成功率</span>
            <span class="s2">{{transData['TRANS_SUCCESS_FEE'] || '--'}}%</span>
            <img src="~@/assets/images/3.png" />
          </div>
        </div>
      </div>

      <div class="model3">
        <img class="homeimg" src="~@/assets/images/home.png" />
        <div class="table">
          <div class="left">
            <img src="~@/assets/images/c8.png" />
            <span>教程相关</span>
          </div>
          <div class="right">
            <div class="info bottomline">买币教程</div>
            <div class="info">卖币教程</div>
          </div>
        </div>
        <div class="table bottomline">
          <div class="left">
            <img src="~@/assets/images/c7.png" />
            <span>常见问题</span>
          </div>
          <div class="right">
            <div class="info bottomline">USDT购买98币教程</div>
            <div class="info bottomline">如何一键买币</div>
            <div class="info">遇到交易异常该怎么办</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/home";
import { mapState, mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      advertList:[],
      transData: {},
      online: '',
    };
  },
  computed: {
    ...mapState({
      baseData: state => state.global.baseData
    }),
  },
  methods: {
    ...mapActions({
      getBaseData: "global/getBaseData",
    }),
    getAdvertList(){
      api.advertList().then(res => {
        if(res.data.code == 0){
          this.advertList = res.data.data || []
        }
      });
    },
    getTransData(){
      api.transData().then(res => {
        if(res.data.code == 0){
          this.transData = res.data.data
        }
      });
    },
    getOnline(){
      api.online().then(res => {
        if(res.data.code == 0){
          this.online = res.data.data
        }
      });
    },
    jumpto(item) {
      if(item.jumpUrl) window.location.href = item.jumpUrl;
    },

  },
  mounted() {
    this.getAdvertList()
    this.getTransData()
    this.getOnline()
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
  .contents{
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
  }
  .top{
    position: absolute;
    width: 100%;
    top: 15px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo{
      width: 81px;
      height: 25px;
      margin-left: 15px;
    }
    .icons{
      display: flex;
      align-items: center;
      .tz{
        width: 20px;
        height: 20px;
        margin-right: 20px;
      }
      .sys{
        width: 20px;
        height: 20px;
        margin-right: 20px;
      }
    }
  }
  .swiper{
     min-height: 245px;
  }
  .my-swipe{
    // display: flex;
    position: relative;
    /deep/.van-swipe__track{
      display: flex;
    }
    /deep/.van-swipe__indicator{
      display: block;
      width: 5px;
      height: 5px;
      opacity: 0.5;
      background: #ffffff;
      border-radius: 50%;
      margin: 0 2.5px;
    }
    /deep/.van-swipe__indicators{
      width: 100%;
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 23px;
    }
    /deep/.van-swipe__indicator--active{
      width: 15px;
      height: 5px;
      opacity: 1;
      background: #ffffff;
      border-radius: 3px;
    }
    .van-swipe-item {
      img{
        width: 100%;
      }
    }
  }
  .center{
    margin-top: -15px;
    z-index: 1;
    position: relative;
    background: #f0f5fd;
    border-radius: 15px 15px 0 0;
    padding: 15px;
    .model{
      width: 100%;
      display: flex;
      align-items: center;
      height: 75px;
      background: #ffffff;
      border-radius: 8px;
      .c{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        position: relative;
        img{
          width: 25px;
          height: 25px;
          margin-bottom: 8px;
        }
        span{
          width: 52px;
          height: 18.5px;
          font-size: 13px;
          text-align: center;
          color: #444444;
          line-height: 18.5px;
        }
      }
      .line{
        &::after{
          content: " ";
          width: 1px;
          height: 20px;
          background: #d1dded;
          position: absolute;
          right: 0;
          top: 15px;
        }
      }
    }
    .model2{
      align-items: center;
      background: #ffffff;
      border-radius: 8px;
      padding: 15px;
      margin-top: 12px;
      .gray{
        padding: 15px;
        display: flex;
        align-items: center;
        // height: 65px;
        background: #f0f7ff;
        border-radius: 5px;
        .x{
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 50%;
          img{
            width: 31px;
            height: 31px;
            margin-right: 8px;
          }
          span{
            font-size: 14px;
            color: #444444;
            line-height: 20px;
            font-weight: Medium;
          }
        }
        .line{
          &::after{
            content: " ";
            width: 1px;
            height: 24px;
            background: #d1dded;
            position: absolute;
            right: 0;
            top: 8px;
          }
        }
      }
      .lineModel{
        margin-top: 15px;
        display: flex;
        align-items: center;
        .mo{
          width: 33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          .s1{
            font-size: 12px;
            color: #8f949c;
            line-height: 16.5px;
            margin-bottom: 8px;
          }
          .s2{
            font-size: 15px;
            color: #0e9976;
            line-height: 19px;
            margin-bottom: 4px;
          }
          img{
            width: 57px;
            height: 21px;
          }
          .red{
            color: #E62C3B;
          }
        }
      }
    }
    .model3{
      align-items: center;
      background: #ffffff;
      border-radius: 8px;
      padding: 15px;
      margin-top: 12px;
      .homeimg{
        width: 100%;
        margin-bottom: 12px;
      }
      .table{
        display: flex;
        align-items: center;
        border-top: 1px solid #E8E8E8;
        .left{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 130px;
          height: 100%;
          img{
            width: 14px;
            height: 14px;
          }
          span{
            font-size: 14px;
            font-weight: Medium;
            color: #444444;
            line-height: 20px;
            margin: 0 9px;
          }
          &::after{
            content: " ";
            background-image: url('../assets/images/arrow2.png');
            background-size: 100% 100%;
            width: 6.5px;
            height: 10px;
            display: block;
          }
        }
        .right{
          width: calc(100% - 131px);
          border-left: 1px solid #E8E8E8;
          padding-left: 12px;
          padding-right: 5px;
          .info{
            font-size: 13px;
            text-align: left;
            color: #444444;
            line-height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;;
            &::after{
              content: " ";
              background-image: url('../assets/images/arrow3.png');
              background-size: 100% 100%;
              width: 5px;
              height: 8px;
              display: block;
            }
          }
        }
      }
      .bottomline{
        border-bottom: 1px solid #E8E8E8
      }
    }
  }
</style>
